import React, { useEffect, useRef, useState } from 'react';
import { Button, Modal, Checkbox, Form, Input, Space } from 'antd';
import { connect } from 'umi';
import { randomString, timestampToTime } from '@/utils/index';
// import { FormInstance } from '@ant-design/pro-components';

const addservice = (props: any) => {
  const [form] = Form.useForm();
  const { open, type, name, id } = props;
  const [isModalOpen, setIsModalOpen] = useState(false);
  useEffect(() => {
    type === 'editname'
      ? form.setFieldsValue({ kefu_name: props.name })
      : form.resetFields();
  }, [open]);
  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    // console.log(props.delId);
    // console.log(111);
  };
  const handleCancel = () => {
    props.close();
    form.resetFields();
  };
  const onFinish = (values: any) => {
    if (type === 'addservice') {
      values.kefu_code = 'kefu' + randomString(13);
      values.kefu_avatar = '/static/common/images/kefu.jpg';
      values.online_status = 2;
      values.create_time = timestampToTime(new Date().getTime() / 1000);
      values.update_time = timestampToTime(new Date().getTime() / 1000);
      values.client_id = null;
      props.dispatch({ type: 'area/addservice', payload: values });
    } else if (type === 'editname') {
      console.log(values);
      props.dispatch({
        type: 'area/editname',
        payload: { id, kefu_name: values.kefu_name },
      });
    }
    props.close();
    form.resetFields();
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <div>
      <Modal
        getContainer={document.body}
        title={
          type === 'addservice'
            ? '添加客服'
            : type === 'editname'
            ? '修改客服'
            : '修改密码'
        }
        open={props.open}
        onOk={handleOk}
        onCancel={handleCancel}
        width="500px"
        centered
        footer={null}
      >
        <Form
          name="basic"
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
          form={form}
        >
          {type === 'addservice' || type === 'editname' ? (
            <Form.Item
              label="客服名"
              name="kefu_name"
              rules={[
                { required: true, message: 'Please input your username!' },
              ]}
            >
              <Input />
            </Form.Item>
          ) : (
            ''
          )}
          {type === 'addservice' || type === 'editpassword' ? (
            <Form.Item
              label="密码"
              name="kefu_password"
              rules={[
                { required: true, message: 'Please input your password!' },
              ]}
            >
              <Input />
            </Form.Item>
          ) : (
            ''
          )}

          <Form.Item wrapperCol={{ offset: 14, span: 7 }}>
            <Space>
              <Button onClick={handleCancel}>取消</Button>
              <Button type="primary" htmlType="submit">
                保存
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default connect()(addservice);
